import React, {Fragment } from 'react';
import 'antd/dist/antd.css'
import {Input,Button,List} from 'antd'
//修改为无状态组件提升性能

const TodoListUi = (props)=>{
    return ( 
        <div style={{margin:'10px'}}>
           <Fragment>
                <Input placeholder={props.inputValue} value={props.inputValue} style={{width:'250px',marginRight:'10px'}} onChange={props.changeInputValue} />
                <Button type="primary" onClick={props.clickBtn}>增加</Button>
           </Fragment>
            <div style={{margin:'10px',width:'300px'}}>
                <List bordered dataSource={props.list} renderItem={(item,index)=>(<List.Item>
                        <List.Item.Meta avatar={item} />
                        <Button type="text" danger onClick={()=>{props.delItem(index)}} >删除</Button>
                </List.Item>)}/>
            </div>
            
       </div> 
     );
}
// class TodoListUi extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {  }
//     }
//     render() { 
//         return ( 
//             <div style={{margin:'10px'}}>
//                <Fragment>
//                     <Input placeholder={this.props.inputValue} value={this.props.inputValue} style={{width:'250px',marginRight:'10px'}} onChange={this.props.changeInputValue} />
//                     <Button type="primary" onClick={this.props.clickBtn}>增加</Button>
//                </Fragment>
//                 <div style={{margin:'10px',width:'300px'}}>
//                     <List bordered dataSource={this.props.list} renderItem={(item,index)=>(<List.Item>
//                             <List.Item.Meta avatar={item} />
//                             <Button type="danger" onClick={()=>{this.props.delItem(index)}} >删除</Button>
//                     </List.Item>)}/>
//                 </div>
                
//            </div> 
//          );
//     }
// }
 
export default TodoListUi;